<template>
	<div class="census" v-show="showcensus">
		<!-- 财务报表 -->
		<!-- 退出图标 -->
		<span style="position:absolute;top:5px;right:10px;" @click="hidecensus">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-diamond_flat"></use>
			</svg>
		</span>
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-chart_flat"></use>
			</svg>
			<span>财务报表</span>
		</p>
		<ul class="list">
			<li><span>收入统计</span></li>
			<li><span>支出统计</span></li>
			<li><span>利润统计</span></li>
		</ul>
		<!-- 销售报表 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-idea_flat"></use>
			</svg>
			<span>财务报表</span>
		</p>
		<ul class="list">
			<li><span>销售统计</span></li>
			<li><span>销售业绩</span></li>
			<li></li>
		</ul>
		<!-- 采购报表 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-magnet_flat"></use>
			</svg>
			<span>财务报表</span>
		</p>
		<ul class="list">
			<li><span>采购统计</span></li>
			<li></li>
			<li></li>
		</ul>
		<!-- 会员报表 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-pie_flat"></use>
			</svg>
			<span>财务报表</span>
		</p>
		<ul class="list">
			<li><span>会员消费</span></li>
			<li><span>会员充值</span></li>
			<li></li>
		</ul>
		<!-- 仓库报表 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-internet_flat"></use>
			</svg>
			<span>财务报表</span>
		</p>
		<ul class="list">
			<li><span>库存预警</span></li>
			<li><span>报损统计</span></li>
			<li></li>
		</ul>
	</div>
</template>

<script>
	// 只需要在通信的兄弟组件间导入bus事件总线
import bus from"../bus.js"
	export default {
		name: "census",
		data() {
			return {
				showcensus: false
			}
		},
		methods:{
			hidecensus(){
				this.showcensus=false
			}
		},
		mounted(){
			bus.$on("showcensus", (data) => {
				this.showcensus = data
			})
		}
	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style: none;
	}

	p span {
		font-weight: bold;
		font-size: 12px;
		margin-left: 5px;
	}

	.list {
		display: flex;
		text-align: center;
		justify-content: center;
	}

	.list li {
		width: 40%;
		line-height: 30px;
	}

	.list li span {
		border: 1px solid lightblue;
		color: lightblue;
		/* 上左下右 */
		padding: 5px 10px 5px 10px;
		font-size: 10px;
	}

	.census {
		background-color: white;
		width: 90%;
		position: fixed;
		left: 5%;
		right: 5%;
		bottom: 100px;
		padding: 5px;
		z-index: 10;
		border: 1px solid lightblue;
		border-radius: 5%;
	}

	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
</style>
